<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件切换控制</title>
    <script src="./lib/vue-2.6.12.js"></script>
    <style>
        .com-fade-enter-active,
        .com-fade-leave-active {
            transition: opacity 0.3s ease;
        }

        .com-fade-enter-from,
        .com-fade-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <!-- 第一种控制组件切换的方式 -->
    <div id="app">
        <a href="http://" @click.prevent="flag=true">登录</a>
        <a href="http://" @click.prevent="flag=false">注册</a>

        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <hr>

    <!-- 第二种控制组件切换的方式 -->
    <div id="app2">
        <a href="http://" @click.prevent="comName='login'">登录</a>
        <a href="http://" @click.prevent="comName='register'">注册</a>

        <component :is="comName"></component>
    </div>
    <hr>

    <!-- 第二种控制组件切换 - 切换动画 -->
    <div id="app3">
        <a href="http://" @click.prevent="comName='login'">登录</a>
        <a href="http://" @click.prevent="comName='register'">注册</a>

        <transition name="com-fade" mode="out-in">
            <component :is="comName"></component>
        </transition>
    </div>
    <hr>

    <script>
        Vue.component('login', {
            template: '<h4>登录组件</h4>'
        });

        Vue.component('register', {
            template: '<h4>注册组件</h4>'
        });

        // 第一种控制组件切换的方式
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            }
        })

        // 第二种控制组件切换的方式
        let vm2 = new Vue({
            el: '#app2',
            data: {
                comName: 'login'
            }
        })

        // 第二种控制组件切换 - 切换动画
        let vm3 = new Vue({
            el: '#app3',
            data: {
                comName: 'login'
            }
        })
    </script>
</body>

</html>